<!DOCTYPE>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Maptalks Quick Start</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css">
  <style>
      html, body, .map {
          height: 100%;
          width: 100%;
          padding: 0;
          margin: 0;
          overflow: hidden;
      }
  </style>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.min.js"></script>
</head>
<body>
<div class="map" id="map"></div>
<script type="text/javascript">
    var map = new maptalks.Map('map', {
        center: [103.572, 36.897],
        zoom: 4,
        baseLayer: new maptalks.TileLayer('base', {
            'urlTemplate' : 'https://b.tile.openstreetmap.org/{z}/{x}/{y}.png'
        })
    });
</script>
</body>
</html>